<template>
  <div class="flex ml-20px">
    <div class="tableManage w-100%">
      <ContentWrap>
        <!-- 搜索区域 -->
        <div class="search-form">
          <Search
            :schema="allSchemas.searchSchema"
            @reset="setSearchParams"
            @search="setSearchParams"
          />
        </div>

        <ElDivider />

        <!-- 操作按钮区域 -->
        <div class="mb-10px">
          <!-- <BaseButton class="opBtn" size="" type="primary" @click="AddAction">
            新增
          </BaseButton> -->

          <!-- 导入功能 -->
          <!-- <el-upload
            ref="uploadRef"

            :auto-upload="false"
            :show-file-list="false"
            :accept="'.xlsx,.xls'"
            :on-change="handleFileChange"
          >
            <BaseButton class="opBtn" size="" type="primary"> 导入 </BaseButton>
          </el-upload>

          <BaseButton
            class="opBtn  opBtn-upload"
            size=""
            type="primary"
            @click="exportAction"
          >
            导出
          </BaseButton> -->
        </div>

        <!-- 数据表格 -->
        <Table
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :columns="allSchemas.tableColumns"
          :data="dataList"
          :loading="loading"
          @register="tableRegister"
          :pagination="{ total }"
        />
      </ContentWrap>
    </div>

    <!-- 新增/编辑/查看对话框 -->
    <Dialog width="65%" v-model="dialogVisible" :title="dialogTitle">
      <!-- 详情组件（查看时显示） -->
      <Detail
        v-if="actionType === 'detail'"
        :detail-schema="allSchemas.detailSchema"
        :current-row="currentRow"
      />

      <!-- 对话框底部按钮 -->
      <template #footer>
        <BaseButton
          v-if="actionType !== 'detail'"
          type="primary"
          :loading="saveLoading"
          @click="save"
        >
          保存
        </BaseButton>
        <BaseButton @click="dialogVisible = false">关闭</BaseButton>
      </template>
    </Dialog>
  </div>
</template>

<script setup lang="tsx">
import { directAxios } from "@/axios/index";
import { ref, unref, reactive } from "vue";
import { ContentWrap } from "@/components/ContentWrap";
import { Table } from "@/components/Table";
import {
  ElMessage,
  ElMessageBox,
  ElUpload,
  UploadFile,
  UploadInstance,
} from "element-plus";
import * as XLSX from "xlsx";
import { useTable } from "@/hooks/web/useTable";
import { Search } from "@/components/Search";
import Detail from "./components/CatalogManagementDetail.vue";
import { Dialog } from "@/components/Dialog";
import { CrudSchema, useCrudSchemas } from "@/hooks/web/useCrudSchemas";
import { BaseButton } from "@/components/Button";
import { Edit, View, Delete } from "@element-plus/icons-vue";
import { useDictionaryStore } from "@/store/modules/dictionaryStore";

import axios from "axios";

const dictionaryStore = useDictionaryStore();

// ============ 响应式数据定义 ============

// 当前节点相关

// 表格相关状态
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { pageSize, currentPage } = tableState;
    const res = await "/cPreferredCatalog/page".get({
      pageNum: unref(currentPage),
      pageSize: unref(pageSize),
      ...unref(searchParams),
    });
    return {
      list: res.data.records || [],
      total: res.data.total || 0,
    };
  },
});

const { total, loading, dataList, pageSize, currentPage } = tableState;
const { getList, getElTableExpose, delList } = tableMethods;

// 搜索参数
const searchParams = ref({
  classificationCode: "",
});

// 对话框相关状态
const dialogVisible = ref(false);
const dialogTitle = ref("");
const currentRow = ref();
const actionType = ref("");

// 加载状态
const saveLoading = ref(false);
const importLoading = ref(false);

// 组件引用
const writeRef = ref<ComponentRef<typeof Write>>();
const uploadRef = ref<UploadInstance>();

// 导入相关
const selectedFile = ref<File | null>(null);

// ============ 数据表结构定义 ============
/**
 * 处理类别选择变化
 * @param value 选中的值数组
 * @param selectedOptions 选中的选项对象数组
 */

const getCascaderObj = (val, opt) => {
  return val.map(function (value, index, array) {
    for (var itm of opt) {
      if (itm.code == value) {
        opt = itm.children;
        return itm;
      }
    }
    return null;
  });
};

const handleCategoryChange = (value) => {
  console.log(value);

  const selectedOptions = getCascaderObj(
    value,
    dictionaryStore.dictionaries.get(
      dictionaryStore.DICTIONARY_TYPES.COM_CLASSIFICATION
    )
  );
  if (!currentRow.value) {
    currentRow.value = {};
  }

  // // // 清空之前的分类数据
  currentRow.value.classification1 = "";
  currentRow.value.classification2 = "";
  currentRow.value.classification3 = "";
  currentRow.value.classificationCode = "";
  currentRow.value.category = value;
  currentRow.value.classificationCode =
    selectedOptions[selectedOptions.length - 1].code;
  // // // 根据选中的层级设置对应的分类字段
  if (selectedOptions.length > 0) {
    currentRow.value.classification1 = selectedOptions[0]?.text || "";
  }
  if (selectedOptions.length > 1) {
    currentRow.value.classification2 = selectedOptions[1]?.text || "";
  }
  if (selectedOptions.length > 2) {
    currentRow.value.classification3 = selectedOptions[2]?.text || "";
  }
};
// 类别
const classificationOptions = computed(() => {
  return (
    dictionaryStore.dictionaries.get(
      dictionaryStore.DICTIONARY_TYPES.COM_CLASSIFICATION
    ) || []
  );
});
/**
 * CRUD表结构配置
 * 定义表格列、搜索表单、编辑表单的字段配置
 */
const crudSchemas = reactive<CrudSchema[]>([
  {
    field: "selection",
    search: { hidden: true },
    form: { hidden: true },
    detail: { hidden: true },
    table: { type: "selection", hidden: true },
  },
  {
    field: "index",
    label: "序号",
    form: { hidden: true },
    search: { hidden: true },
    detail: { hidden: true },
    table: { type: "index" },
  },
  {
    field: "aviationModel",
    label: "工程名称",
    form: {
      formItemProps: {
        rules: [
          {
            required: true,
            message: "请输入工程名称",
          },
          { pattern: /^(?!\s*$)(?!\/+$).+$/, message: "请输入工程名称" },
        ],
      },
      componentProps: { placeholder: "请输入工程名称" },
    },
    search: {
      component: "Input",
      label: "",
      hidden: false,
      componentProps: { placeholder: "型号" },
    },
  },
  {
    field: "classificationCode",
    width: 100,
    label: "分类代码",
    form: {
      componentProps: {
        placeholder: "分类代码将自动生成",
        disabled: true,
      },
      formItemProps: {
        rules: [
          {
            required: true,
            message: "请输入分类代码",
          },
        ],
      },
    },
    search: {
      hidden: true,
    },
  },
  {
    field: "category",
    label: "类别",
    width: 250,
    search: {
      component: "Cascader",
      componentProps: {
        placeholder: "类别",
        options: classificationOptions, // 使用计算属性
        // 配置自定义的 label 和 value 字段
        props: {
          checkStrictly: false,
          emitPath: true,
          label: "text", // 自定义 label 字段
          value: "code", // 自定义 value 字段
          // expandTrigger: 'hover'
        },
      },
    },

    form: {
      component: "Cascader",
      formItemProps: {
        rules: [
          { required: true, message: "请选择类别" },
          // { pattern: /^[0-9]{11}$/, message: "请输入正确的联系方式" },
        ],
      },

      componentProps: {
        placeholder: "请选择类别",
        options: classificationOptions, // 使用计算属性
        // 配置自定义的 label 和 value 字段
        props: {
          checkStrictly: false,
          emitPath: true,
          label: "text", // 自定义 label 字段
          value: "code", // 自定义 value 字段
          // expandTrigger: 'hover'
        },
        onChange: (value: any[]) => {
          handleCategoryChange(value);
        },
      },
    },
    detail: { hidden: true },
    table: {
      formatter: (row: any) => {
        // 组合分类字段，用 > 分隔，空值用 / 代替
        const parts = [
          row.classification1 || "/",
          row.classification2 || "/",
          row.classification3 || "/",
        ];
        return parts.join(" > ");
      },
    },
  },
  {
    field: "classification1",
    label: "一级类别",
    width: 90,
    search: { hidden: true },
    form: { hidden: true },
    table: { hidden: true },
  },
  {
    field: "classification2",
    label: "二级类别",
    width: 90,
    search: { hidden: true },
    form: { hidden: true },
    table: { hidden: true },
  },
  {
    field: "classification3",
    label: "三级类别",
    width: 90,
    search: { hidden: true },
    form: { hidden: true },
    table: { hidden: true },
  },
  {
    field: "componentName",
    label: "元器件名称",
    width: 150,
    search: {
      component: "Input",
      label: "",
      hidden: false,
      componentProps: { placeholder: "元器件名称" },
    },
    form: {
      component: "Input",
      formItemProps: {
        rules: [
          {
            required: true,
            message: "请输入元器件名称",
          },
          { pattern: /^(?!\s*$)(?!\/+$).+$/, message: "请输入元器件名称" },
        ],
      },
      componentProps: { placeholder: "请输入元器件名称" },
    },
  },
  {
    field: "specification",
    label: "型号规格",
    width: 150,
    search: {
      component: "Input",
      label: "",
      hidden: false,
      componentProps: { placeholder: "型号规格" },
    },
    form: {
      component: "Input",
      formItemProps: {
        rules: [
          {
            required: true,
            message: "请输入型号规格",
          },
          { pattern: /^(?!\s*$)(?!\/+$).+$/, message: "请输入型号规格" },
        ],
      },
      componentProps: { placeholder: "请输入型号规格" },
    },
  },
   {
    field: "manufacturer",
    label: "生产厂商",
    width: 120,
    search: { hidden: false,
       component: "Input",
      label: "",

      componentProps: { placeholder: "生产厂商" },
     },
    detail: { span: 12 },
    form: {
      component: "Input",
      formItemProps: {
        rules: [
          {
            required: true,
            message: "请输入生产厂商",
          },
          { pattern: /^(?!\s*$)(?!\/+$).+$/, message: "请输入生产厂商" },
        ],
      },
      colProps: { span: 12 },
      componentProps: { placeholder: "请输入生产厂商" },
    },
  },
  {
    field: "performanceParam",
    label: "主要性能参数",
    width: 150,
    search: { hidden: true },
    form: {
      component: "Input",

      componentProps: { placeholder: "请输入主要性能参数" },
    },
  },

  {
    field: "workingTemperature",
    label: "工作温度范围/最高工作结温（℃）",
    width: 240,
    search: { hidden: true },
    form: {
      component: "Input",

      componentProps: { placeholder: "请输入工作温度范围/最高工作结温（℃）" },
    },
  },
  {
    field: "qualityGrade",
    label: "质量等级",
    width: 100,
    search: {
      component: "Input",
      label: "",
      hidden: false,

      componentProps: { placeholder: "质量等级" },
    },
    form: {
      component: "Input",

      componentProps: { placeholder: "请输入质量等级" },
    },
  },
  {
    field: "standards",
    label: "总规范/详细规范/七项技术协议",
    width: 240,
    search: { hidden: true },
    form: {
      component: "Input",
 colProps: { span: 24 },
      componentProps: { placeholder: "请输入总规范/详细规范/七项技术协议" },
    },
    detail: { span: 24 },
  },
  {
    field: "appearance",
    label: "封装形式或外形尺寸",
    width: 200,
    search: { hidden: true },
    form: {
      component: "Input",

      componentProps: { placeholder: "请输入封装形式或外形尺寸" },
    },
  },
  {
    field: "foreignModel",
    label: "国外对应型号",
    width: 150,
    form: {
      component: "Input",

      componentProps: { placeholder: "请输入国外对应型号" },
    },
    search: { hidden: true },
  },
  {
    field: "remark",
    label: "备注",
    width: 90,
    search: { hidden: true },
    detail: { span: 24 },
    form: {
      component: "Input",
      componentProps: {
        type: "textarea",
        rows: 3,
        placeholder: "请输入备注信息",
      },
      colProps: { span: 24 },
    },
    table: { hidden: true },
  },
  {
    field: "action",
    label: "操作",
    fixed: "right",
    form: { hidden: true },
    detail: { hidden: true },
    search: { hidden: true },
    table: {
      width: 80,
      fixed: "right",
      slots: {
        default: (data: any) => {
          const row = data.row;
          return (
            <>
              <div style="display:flex;color: var(--el-color-primary)">
                {/* <div
                  class="flex-1 cursor-pointer"
                  onClick={() => action(row, "edit")}
                >
                  <el-icon>
                    <Edit />
                  </el-icon>
                  编辑
                </div> */}
                <div
                  class="flex-1 cursor-pointer"
                  onClick={() => action(row, "detail")}
                >
                  <el-icon>
                    <View />
                  </el-icon>
                  查看
                </div>
                {/* <div class="flex-1 cursor-pointer" onClick={() => delData(row)}>
                  <el-icon>
                    <Delete />
                  </el-icon>
                  删除
                </div> */}
              </div>
            </>
          );
        },
      },
    },
  },
]);

// 生成CRUD相关的所有schema
const { allSchemas } = useCrudSchemas(crudSchemas);

// ============ 方法定义 ============

/**
 * 设置搜索参数并刷新表格
 * @param params 搜索参数
 */
const setSearchParams = (params: any) => {
  currentPage.value = 1;
  searchParams.value = params;
  searchParams.value.classificationCode =
    params.category?.[params.category.length - 1] || "";
  getList();
};

/**
 * 新增操作
 */
const AddAction = () => {
  dialogTitle.value = "新增";
  currentRow.value = undefined;
  dialogVisible.value = true;
  actionType.value = "";
};

/**
 * 删除数据
 * @param row 要删除的行数据
 */
const delData = async (row?: any) => {
  // const params = new URLSearchParams();
  // params.append("id", row?.id);

  ElMessageBox.confirm("是否确认删除?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const params = {
        id: row?.id,
      };
      const res = await directAxios.post(
        "/cPreferredCatalog/delete",
        params,
        {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          transformRequest: [
            (data) => {
              return data.toString();
            },
          ],
        }
      );

      if (res.code === 200) {
        ElMessage.success("删除成功");
        getList();
      }
    })
    .catch(() => {});
};

/**
 * 行操作处理（编辑/查看）
 * @param row 行数据
 * @param type 操作类型：'edit' | 'detail'
 */
const action = (row, type: string) => {
  dialogTitle.value = type === "edit" ? "编辑" : "查看";
  actionType.value = type;
  row.classificationCode === undefined ||
  row.classificationCode == "" ||
  row.classificationCode == null
    ? (row.classificationCode = "")
    : row.classificationCode;

  const data =
    row.classificationCode.length == 8
      ? [
          row.classificationCode.slice(0, 4) || "",
          row.classificationCode.slice(0, 6) || "",
          row.classificationCode || "",
        ]
      : row.classificationCode.length == 6
        ? [
            row.classificationCode.slice(0, 4) || "",
            row.classificationCode.slice(0, 6) || "",
          ]
        : [row.classificationCode.slice(0, 4) || ""];
  currentRow.value = {
    ...row,
    category: data,
  };
  dialogVisible.value = true;
};

/**
 * 保存表单数据
 */
const save = async () => {
  const write = unref(writeRef);
  const formData = await write?.submit();

  if (formData) {
    saveLoading.value = true;
    try {
      const res = await "/cPreferredCatalog/save".post({
        ...formData,
        category: "",
        classification1: currentRow.value.classification1 || "",
        classification2: currentRow.value.classification2 || "",
        classification3: currentRow.value.classification3 || "",
      });
      if (res) {
        currentPage.value = 1;
        getList();
      }
    } catch (error) {
      console.log(error);
    } finally {
      saveLoading.value = false;
      dialogVisible.value = false;
    }
  }
};

// ============ 导入导出功能 ============

/**
 * 处理文件选择变化事件
 * @param file 上传的文件对象
 */
const handleFileChange = async (file: UploadFile) => {
  if (!file.raw) {
    return;
  }

  selectedFile.value = file.raw;
  importLoading.value = true;

  try {
    // 调用导入API
    const formData = new FormData();
    formData.append("file", file.raw);
    // formData.append('deviceCode', currentNodeKey.value);

    const res = await "/cDomesticComponents/importByExcel".post(
      formData,
      {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }
    );

    ElMessage.success("导入成功");
    getList(); // 刷新列表
  } catch (error: any) {
    ElMessage.warning(error.data.msg);
  } finally {
    importLoading.value = false;
    // 清空文件选择
    if (uploadRef.value) {
      uploadRef.value.clearFiles();
    }
    selectedFile.value = null;
  }
};

/**
 * 导出数据
 */
const exportAction = async () => {
  window.location.href =
    import.meta.env.VITE_APP_API_URL +
    "/cDomesticElectromechanicals/export";
};

// 组件挂载后的调试代码
onMounted(async () => {
  await dictionaryStore.preloadCommonDictionaries();
  // 其他初始化逻辑...
});
</script>

<style scoped lang="less">
:deep(.el-card) {
  height: 100%;
}

.operIcon {
  width: 20px !important;
}

:deep(.el-divider--horizontal) {
  margin: 5px 0 15px 0;
}

.mb-10px {
  display: flex;
}

.opBtn-upload {
  display: inline-block;
  margin: 0 12px;
}
</style>
